<template>
  <div class="essay-question-container">
    <!-- 富文本编辑器 -->
    <div class="editor-wrapper">
      <editor-plus
        v-model="editorContent"
        :disabled="disabled"
        @input="handleEditorChange"
      />
    </div>

    <!-- 文件上传区域 -->
    <div class="upload-section" v-if="showFileUpload">
      <div class="section-header">
        <span class="title">附件上传</span>
      </div>
      <file-upload-plus
        v-model="fileList"
        :limit="maxFiles"
        :max-size="maxFileSize"
        :accept="allowedExtensions"
        :disabled="disabled || !showFileUpload"
        @change="handleFileChange"
      />
    </div>
  </div>
</template>

<script>
import EditorPlus from "@/components/EditorPlus/index.vue";
import FileUploadPlus from "@/components/FileUploadPlus/index.vue";

export default {
  name: 'Use',
  components: {
    EditorPlus,
    FileUploadPlus
  },
  props: {
    // 编辑器内容
    value: {
      type: String,
      default: ''
    },
    // 初始文件列表
    files: {
      type: Array,
      default: () => []
    },
    // 是否禁用组件
    disabled: {
      type: Boolean,
      default: false
    },
    // 最大上传文件数量
    maxFiles: {
      type: Number,
      default: 10
    },
    // 单个文件大小限制(MB)
    maxFileSize: {
      type: Number,
      default: 20
    },
    // 允许的文件扩展名
    allowedExtensions: {
      type: Array,
      default: () => ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf', 'jpg', 'jpeg', 'png', 'zip', 'rar']
    },
    // 是否显示上传提示
    showUploadTip: {
      type: Boolean,
      default: true
    },
    // 是否显示文件上传区域
    showFileUpload: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      editorContent: this.value,
      fileList: this.files ? [...this.files] : []
    };
  },
  watch: {
    value(newVal) {
      if (newVal !== this.editorContent) {
        this.editorContent = newVal;
      }
    },
    files(newFiles) {
      this.fileList = newFiles ? [...newFiles] : [];
    },
    showFileUpload(newVal) {
      if (!newVal && this.fileList.length > 0) {
        this.clearFiles();
      }
    }
  },
  methods: {
    // 处理编辑器内容变化
    handleEditorChange(content) {
      this.$emit('input', content);
      this.emitChangeEvent();
    },

    // 处理文件列表变化
    handleFileChange(files) {
      this.fileList = files;
      this.$emit('update:files', [...files]);
      this.emitChangeEvent();
    },

    // 触发change事件
    emitChangeEvent() {
      this.$emit('change', {
        content: this.editorContent,
        files: this.showFileUpload ? this.fileList : []
      });
    },

    // 清空文件列表
    clearFiles() {
      this.fileList = [];
      this.$emit('update:files', []);
      this.emitChangeEvent();
    },

    // 获取所有内容(文本+文件)
    getContent() {
      return {
        content: this.editorContent,
        files: this.showFileUpload ? this.fileList : []
      };
    },

    // 清空所有内容
    clear() {
      this.editorContent = '';
      if (this.showFileUpload) {
        this.clearFiles();
      } else {
        this.emitChangeEvent();
      }
      this.$emit('input', '');
    }
  }
};
</script>

<style lang="scss" scoped>
.essay-question-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;

  .editor-wrapper {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    overflow: hidden;
    transition: border-color 0.3s;

    &:hover {
      border-color: #c0c4cc;
    }
  }

  .upload-section {
    .section-header {
      display: flex;
      align-items: center;
      margin-bottom: 12px;

      .title {
        font-size: 15px;
        font-weight: 600;
        color: #333;
      }

      .tip {
        margin-left: 12px;
        font-size: 12px;
        color: #909399;
      }
    }
  }
}
</style>
